<template>
  <view class="container">
    <view class="navbar u-f-ajc">
      <image src="/static/jibei/myteam/header.png" mode="widthFix"></image>
    </view>
    <view class="content">
      <view class="content_box">
        <view class="num_box">
          <view class="u-f-ac u-f-jsb">
            <view>ID号：{{resObj.my_id || 0}}</view>
          </view>
          <view class="u-f-ac u-f-jsb">
            <view>总业绩：{{resObj.all_yj || 0}}</view>
            <view>直推人数：{{resObj.my_zt || 0}}</view>
          </view>
          <view class="u-f-ac u-f-jsb">
            <view>今日新增业绩：{{resObj.all_tody_yeji || 0}}</view>
            <view>总人数：{{resObj.my_team || 0}}</view>
          </view>
        </view>

        <view class="u-f-ac items" style="margin-top: 30rpx;">
          <view>ID</view>
          <view style="width: 14.6%;">无效</view>
          <view style="width: 14.6%;">有效</view>
          <view style="width: 20.6%;">新增业绩</view>
          <view>总业绩</view>
          <view>点击</view>
        </view>
        <scroll-view scroll-y style="width: 100%;height: 850rpx;">
          <view v-for="(item, index) in res" :key="index">
            <view class="u-f-ac items items2">
              <view>{{item.id}}</view>
              <view style="width: 14.6%;">{{item.wx_num}}</view>
              <view style="width: 14.6%;">{{item.yx_num}}</view>
              <view style="width: 20.6%;">{{item.tody_yj}}</view>
              <view>{{item.yj}}</view>
              <view>
                <u-switch v-model="item.checked" active-color="#37706D" inactive-color="#FFFFFF" size="40"
                  @change="switchChange(item, index)"></u-switch>
              </view>
            </view>

            <block v-if="res2.openid == item.openid">
              <view class="u-f-ac items items2" v-for="(item2,index2) in res2.user_list" :key="index2"
                style="background-color: #EEE;">
                <view>{{item2.id}}</view>
                <view style="width: 14.6%;">{{item2.wx_num}}</view>
                <view style="width: 14.6%;">{{item2.yx_num}}</view>
                <view style="width: 20.6%;">{{item2.tody_yj}}</view>
                <view>{{item2.yj}}</view>
                <view>
                  <!-- <u-switch v-model="checked" active-color="#37706D" inactive-color="#FFFFFF" size="40"></u-switch> -->
                </view>
              </view>
            </block>
          </view>


        </scroll-view>

      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        res: [],
        res2: [],
        res3: [],
        res4: [],
        openid: '',
        real_name: '',
        real_head_img: '',
        create_time: '',
        resObj: {},
      }
    },
    onLoad: function() {
      uni.getStorage({
        key: 'openid',
        success: (res) => {
          this.openid = res.data
          this.setajax()
        },
      });
    },
    methods: {
      copyText(text) {
        uni.setClipboardData({
          data: text, //要被复制的内容
          success: () => { //复制成功的回调函数
            uni.showToast({ //提示
              title: '复制成功'
            })
          }
        });
      },
      setajax() {
        uni.request({
          url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member.mycommunity&app=1',
          method: 'POST',
          data: {
            openid: this.openid
          },
          header: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          success: res => {
            if (res && res.data && res.data.user_list && res.data.user_list.length) {
              res.data.user_list.forEach((item, index) => {
                item.checked = false
              })
            }

            this.res = res.data.user_list
            this.resObj = res.data
          },
          fail: () => {},
          complete: () => {}
        });
      },
      // 一级滑块 点开关闭
      switchChange(item, index) {
        // console.log(item, index)
        this.res.forEach((it, ind) => {
          console.log(index, ind)
          if (index !== ind) this.res[ind].checked = false
          else this.res[index].checked = true
        })
        if (item) {
          uni.request({
            url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member.mycommunity&app=1',
            method: 'POST',
            data: {
              openid: item.openid,

              // select_user_id: e.currentTarget.dataset.id,
            },
            header: {
              'Content-Type': 'application/x-www-form-urlencoded'
            },
            success: res => {
              this.res2 = res.data
            },
            fail: () => {},
            complete: () => {}
          });
        } else {
          this.res2 = []
          this.res3 = []
          this.res4 = []
        }
      },
      // 二级滑块 滑块点击
      switchChange1(e) {
        if (e.detail.value) {
          uni.request({
            url: 'https://cx.mingmeijt.com/Api/User/myFriend',
            method: 'POST',
            data: {
              user_id: this.user_id,
              select_user_id: e.currentTarget.dataset.id,
              session_id: uni.getStorageSync("sessionid")
            },
            header: {
              'Content-Type': 'application/x-www-form-urlencoded'
            },
            success: res => {
              if (res.data.code == 999) {
                uni.navigateTo({
                  url: '/pages/999/999'
                })
              };
              this.res3 = res.data
            },
            fail: () => {},
            complete: () => {}
          });
        } else {
          this.res3 = []
          this.res4 = []
        }
      },
      // 三级滑块点击
      switchChange2(e) {
        if (e.detail.value) {
          uni.request({
            url: 'https://cx.mingmeijt.com/Api/User/myFriend',
            method: 'POST',
            data: {
              user_id: this.user_id,
              select_user_id: e.currentTarget.dataset.id,
              session_id: uni.getStorageSync("sessionid")
            },
            header: {
              'Content-Type': 'application/x-www-form-urlencoded'
            },
            success: res => {
              if (res.data.code == 999) {
                uni.navigateTo({
                  url: '/pages/999/999'
                })
              };
              this.res4 = res.data
            },
            fail: () => {},
            complete: () => {}
          });
        } else {
          this.res4 = []
        }
      },
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #B5C3C7;
  }

  .container {
    width: 100%;
    height: 100vh;
    background: url(/static/jibei/home/home_bg.png) no-repeat 0 0;
    background-size: cover;
    box-sizing: border-box;
  }

  .navbar {
    width: 100%;
    padding: 160rpx 0 70rpx;

    image {
      width: 80%;
    }
  }

  .content {
    padding: 0 40rpx;
  }

  .content_box {
    width: 100%;
    height: 1200rpx;
    background: url(/static/jibei/myteam/kuang.png) no-repeat 0 0;
    background-size: cover;
    padding: 50rpx 30rpx 0;

    .num_box {
      padding: 0 30rpx;

      view {
        font-size: 30rpx;
        color: #0D727C;
        font-weight: 700;
      }

      >view {
        margin-bottom: 16rpx;
      }
    }

    .items {
      >view {
        width: 16.6%;
        color: #0D727C;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .items2 {
      padding: 24rpx 0;
      border-bottom: 2px solid #2C848D;

      >view {
        font-weight: 700;
        font-size: 26rpx;
      }
    }
  }
</style>
